<template>
  <v-layout>
    <template #header>
      <div style="display: flex; align-items: center;">
        <el-select v-model="classItem" placeholder="请选择商品大类">
        <el-option
          v-for="item in classList"
          @click.native="igetSumOrderInfo(item)"
          :key="item.cclass"
          :label="item.cdesc"
          :value="item.cclass"
        />
      </el-select>
      <div>
        <el-button type="primary"  @click="exportbtn"  class="exportstyle">导出</el-button>
        <el-button type="primary"  @click="printbtn" v-print="print" >打印</el-button>
      </div>
     
      <div>
        <el-date-picker
        style="margin-left: 30px; "
        v-model="timeData.timeRange"
        type="datetimerange"
        range-separator="-"
        start-placeholder="开始时间"
        end-placeholder="结束时间"
        value-format="YYYY-MM-DD HH:mm:ss"
        size="default"
        @change = "getPurchaseList"
      />
      </div>
      
      </div>
    </template>
      <!-- <v-table 
      url="/querySummaryListByCategory"
      :query="tableQuery"
      AnyObject
      ref="tableRef"
      :paginglist="paginglist"
    >
      <v-column auto prop="scName" label="学校名称"></v-column>
      <v-column auto prop="goodsClassName" label="商品大类"></v-column>
      <v-column auto prop="price" label="价格"></v-column>
    </v-table> -->
    <el-table :data="tableData" border style="width: 100%"  
    :header-cell-style="{textAlign: 'center'}" 
    :cell-style="{ textAlign: 'center' }">
        <el-table-column prop="scName" label="学校名称"/>
        <el-table-column prop="goodsClassName" label="商品大类" />
        <el-table-column prop="price" label="价格" />
    </el-table>
    <div class="flex mt-$layout-padding justify-end">
      <el-pagination
        v-model:current-page="currentPage"
        v-model:page-size="pageSize"
        :page-sizes="[10, 30, 50, 100]"
        :small="small"
        :disabled="disabled"
        :background="background"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        @size-change="handleSizeChange"
        @current-change="handleSizeChange"
      />
    </div>
    
     <div id="printDiv" v-if="printform">
        <table style="margin-top: 0.5rem">
            <tbody>
              <tr>
                <td  style=" width: 5%;  text-align: center;
                    border-bottom: 1px solid gray;
                    border-right: 1px solid gray;">学校名称</td>
                <td  style="
                    width: 5%;
                    text-align: center;
                    border-bottom: 1px solid gray;
                    border-right: 1px solid gray;
                  ">商品大类</td>
                <td style="
                    width: 5%;
                    text-align: center;
                    border-bottom: 1px solid gray;
                    border-right: 1px solid gray;
                  ">价格</td>
              </tr>
              <tr v-for="(item, index) in tableDatalsit" :key="index">
                <td style="
                    width: 5%;
                    text-align: center;
                    border-bottom: 1px solid gray;
                    border-right: 1px solid gray;
                  ">{{item.scName}}</td>
                  <td style="
                    width: 5%;
                    text-align: center;
                    border-bottom: 1px solid gray;
                    border-right: 1px solid gray;
                  ">{{item.goodsClassName}}</td>
                  <td style="
                    width: 5%;
                    text-align: center;
                    border-bottom: 1px solid gray;
                    border-right: 1px solid gray;
                  ">{{item.price}}</td>
                  </tr>
              
            </tbody>
          </table>
    </div>
   
  </v-layout>
</template>

<script setup lang="ts">
import { useTable } from "@/components/table/useTable";
import { reactive, ref } from "vue";
import type { classData } from "@/api/user/model";
import { useUserStore } from "@/stores/user";
import { queryAllGoodsClass,printsummary,querySummaryListByCategory } from "@/api/user";
import { exportExcelMethod } from "@/utils/excel";
import { TrapFocus,dayjs} from "element-plus";
const { tableRef, getSelectionRows, reload } = useTable();
//这里是打印的配置项
const  print=ref({
        id: 'printDiv',//这里的id就是上面我们的打印区域id，实现指哪打哪
        popTitle: '&nbsp;', // 打印配置页上方的标题
        extraHead: '', // 最上方的头部文字，附加在head标签上的额外标签，使用逗号分割
        preview: false, // 是否启动预览模式，默认是false
        previewTitle: '预览的标题', // 打印预览的标题
        previewPrintBtnLabel: '预览结束，开始打印', // 打印预览的标题下方的按钮文本，点击可进入打印
        zIndex: 20002, // 预览窗口的z-index，默认是20002，最好比默认值更高
        previewBeforeOpenCallback() { console.log('正在加载预览窗口！'); }, // 预览窗口打开之前的callback
        previewOpenCallback() { console.log('已经加载完预览窗口，预览打开了！') }, // 预览窗口打开时的callback
        beforeOpenCallback() { 
          console.log('开始打印之前！') }, // 开始打印之前的callback
        openCallback() { console.log('执行打印了！') }, // 调用打印时的callback
        closeCallback() {
          printform.value = false
           console.log('关闭了打印工具！', printform.value) }, // 关闭打印的callback(无法区分确认or取消)
        clickMounted() { console.log('点击v-print绑定的按钮了！') },
 
      })
 const paginglist = ref(true); 
 const permissions = ref(true);
//查询供应商信息
const { tznUser } = useUserStore();
// if (tznUser.type == '1') {
//   permissions.value = false;
// }

const currentDate = dayjs().format("YYYY-MM-DD HH:mm:ss");
const time =dayjs().format("YYYY-MM-DD");

const tableQuery = reactive({
  goodsClass: "",
  vendorid: tznUser.areaId,
  // vendorid: '111',
  beginTime: time+' '+'00:00:00',
  endTime: time+' '+'23:59:59',
  size: 10,
  current: 1,
});
const timeData = reactive({
  timeRange:[time+' '+'00:00:00',time+' '+'23:59:59'], // 时间范围 [开始时间, 结束时间]
});
const getPurchaseList = () =>{
  tableQuery.beginTime = timeData.timeRange[0];
  tableQuery.endTime = timeData.timeRange[1];
  querySummaryListByCategory(tableQuery).then((data) => {
    tableData.value=data.records
    total.value = data.total;
});
printsummary(tableQuery).then((data) => {  
  console.log(data);
  tableDatalsit.value = data;
});
}

const classList = ref<classData[]>([]);
const tableData = ref([]) 
const tableDatalsit = ref([]) 
const printform = ref(false)
const classItem = ref<classData>({
  cdesc: "",
  cclass: "",
  inum: "",
});
//分页
const currentPage = ref(1)
const pageSize = ref(10)
const small = ref(false)
const disabled = ref(false)
const background = ref(false)
const total = ref(0); 
const handleSizeChange = (val: number) => {
  tableQuery.current = val  
  querySummaryListByCategory(tableQuery).then((data) => {
    tableData.value=data.records
    total.value = data.total;
});
printsummary(tableQuery).then((data) => {  
  tableDatalsit.value = data;
});
}
//获取大类信息
queryAllGoodsClass().then((data) => {  
  classList.value = data;
  classItem.value = data[0].cdesc;
  tableQuery.goodsClass = data[0].cclass;
  reload();
  querySummaryListByCategory(tableQuery).then((data) => {
    tableData.value=data.records
    total.value = data.total;
});
printsummary(tableQuery).then((data) => {  
  console.log(data);
  tableDatalsit.value = data;
});
  
});

//根据学校选择
const igetSumOrderInfo = (item: any) => {  
  printform.value = false
  classItem.value = item.cdesc;
  tableQuery.goodsClass = item.cclass;
  reload();
  querySummaryListByCategory(tableQuery).then((data) => {
    tableData.value=data.records
    total.value = data.total;
    // currentPage.value = data.size
});
printsummary(tableQuery).then((data) => {  
  console.log(data);
  tableDatalsit.value = data;
});
 
};
//导出
const exportbtn = () => {
  const url = `/assist/export/exportSummaryListByCategory?goodsClass=${tableQuery.goodsClass}
  &vendorid=${tableQuery.vendorid}&beginTime=${tableQuery.beginTime}&endTime=${tableQuery.endTime}`;
  const myObj = {
    method: "get",
    url: url,
  };  
  exportExcelMethod(myObj);
};
//打印全部数据
// printsummary(tableQuery).then((data) => {  
//     tableData.value = data;
//   reload();
// });
//打印
const printbtn = ()=>{
  printform.value = true
 
 
 
}

</script>
<style lang="scss" scoped>
@page {
  size: auto;
  margin: 5mm;
}
html {
    background-color: #ffffff;
    height: auto;
    margin: 0px;
}
.exportstyle{
  margin-left: 48px;
}
table {
  border-collapse: collapse;
  border: 1px solid gray;
  width: 100%;
  font-size: 0.28rem;
  tr {
    width: 100%;
    td {
      text-align: center;
    }
  }
}
.datepicker{
  margin-left: 30px;
}
</style>



